<template>
	<assNavbar title="朋友"></assNavbar>
	<view class="content" :style="{height:state.height + 'px'}">
		<view class="list ss-flex justify-start flex-wrap">
			<view class="item ss-flex" v-for="(item,index) in state.list" :key="index" @click="change(item)">
				<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
				<view class="name">{{item.nickName}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import assNavbar from '@/components/ass-navbar.vue'
	import sheep from '@/sheep';
	import API from '../api'
	import association from '@/association/store'
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive,
	} from 'vue';

	const state = reactive({
		height:0,
		list:[]
	})
	const theme = computed(() => association().theme)
	const userInfo = computed(() => association().userInfo)
	
	onLoad((options) => {
		let system = uni.getSystemInfoSync()
		state.height = system.windowHeight - (sheep.$platform.device.statusBarHeight + 44)
		getList()
	})
	
	const change = (item) => {
		uni.$emit('setFriend',item.nickName)
		uni.navigateBack({
			delta: 1
		});
	}
	
	const getList = async () => {
		const {code,data} = await API.publish.friend({
			mobile:userInfo.value.mobile,
			StartIndex:0
		})
		if (code === 1) {
			state.list = data.data
		}
	}
</script>


<style lang="scss" scoped>
	@import '@/association/scss/index.scss';

	view {
		box-sizing: border-box;
	}

	.content {
		background-color: #fff;
		
		.list {
			.item {
				width: 100%;
				height: 130rpx;
				border-bottom: 2rpx solid #F1F1F1;
				padding: 0 22rpx;
				
				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 6rpx;
					margin-right: 20rpx;
				}
				
				.name {
					flex: 1;
					font-size: 32rpx;
					font-weight: normal;
					color: #3D3D3D;
				}
			}
		}
	}
</style>